iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

33歲轉職者的前端筆記系列 第 29

33歲轉職者的前端筆記-DAY 29 前端面試題目練習

  • 分享至 

  • xImage
  •  

經過幾次的面試,發現在筆試的時候觀念非常不熟悉

所以回家的時候自行找出答案增加基本知識

今天就來做個面試題目的筆記吧

面試題目練習

一、document.write和innerHTML的區別

答:document.write只能直接印在畫面上,無法抓到dom屬性(div那些),innerHTML可以抓到dom屬性。

innerHTML:取得 HTML 元素或寫入字串到 HTML 網頁的語法,且 innerHTML 是 W3C 規定的標準寫法,而 innerText 則是除了可以用來取得 HTML 元素之外,還會把元素的 HTML 標籤去除掉。
選取的文字,包含 HTML 的 tag

innerText
innerText 會過濾掉字串中的 HTML 標籤,例如透過 innerText 取得網頁中的特定元素值 <p>字串</p> 的結果是僅有「字串」,而 HTML 標籤<p> 與 </p> 則會被過濾掉。
會受樣式的影響,它不返回隱藏元素的文字,但 textContent 返回。
** innerText 取得在一個節點內的全部樣式**

textContent:textContent 會獲取所有元素的內容,包括<script> 和 <style> 元素 可以拿到選取範圍的文字包含空格

innerContent:單純的選取的文字 不包含空格

outerHTML

outerHTML 包括在一個節點內的全部 HTML 標籤和文字
outerHTML和innerHTML很像,它們的唯一區別就是outerHTML包括自身元素而innerHTML不包括自身元素。

event.target
一個 click 事件綁定在button上,然後觸發了 click。

二、透過哪個屬性來檢測瀏覽器

答:user agent, 因為User-Agent會告訴網站它是透過什麼工具(通過UA分析出瀏覽器名稱、瀏覽器版本號、渲染引擎、操作系統)發送請求的。

三、垂直置中方法:

1. 使用 Line-height 做單行文字垂直置中
2.Line-height + inline-block 多物件的垂直置中技巧
3.僞元素 :before + inline-block
4.Flex + align-items
5.Flex + margin

四、position屬性

  • static :是預設值。任何套用 position: static; 的元素「不會被特別定位」在頁面上特定位置,而是照著瀏覽器預設的配置自動排版在頁面上,所有其他的屬性值都代表該元素會被定位在頁面上。

上一篇
33歲轉職者的前端筆記 DAY 28 CSS 選取器類別筆記
下一篇
33歲轉職者的前端筆記-DAY 30 終點也是起點
系列文
33歲轉職者的前端筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言